<template>
	<view>
		<tt-bar leftIcon="icon-back" title="退款详情"></tt-bar>
		<view class="orderStatusBox">
			<text class="iconfont icon-info1"></text>
			<view class="orderTextBox">
				<text class="statusText">{{showText[orderDt.orderRefund.status]}}</text>
				<text v-if="orderDt.orderRefund.status==1">{{getDjs(orderDt.orderRefund.leftTime)}}</text>
			</view>
		</view>
		
		<!-- 买家发起申请 -->
		<block v-if="orderDt.orderRefund.status==1">
			<!-- 30天无理由|预约金 -->
			<block v-if="orderDt.orderRefund.type==0">
				<view class="tishiBox">
					<view><text>·</text><text>如果您同意，退款申请达成，按原路退回</text></view>
					<view><text>·</text><text>如果您超时未处理，退款自动达成，按原路退回</text></view>
				</view>
			</block>
			<!-- 协议退 -->
			<block  v-if="orderDt.orderRefund.type==1">
				<view class="tishiBox">
				<view><text>·</text><text>如果您同意，退款申请达成</text></view>
				<view><text>·</text><text>如果您申请协商，买家可以拒绝</text></view>
				<view><text>·</text><text>如果您逾期未处理，系统会自动达成退款</text></view>
				</view>
			</block>
		</block>
		<block v-if="orderDt.orderRefund.status==2">
			<!-- 买家撤销 -->
			
		</block>
		<block v-if="orderDt.orderRefund.status==3">
			<!-- 卖家同意 -->
			
		</block>
		<block v-if="orderDt.orderRefund.status==4">
			<!-- 卖家发起协商 -->
			<view class="tishiBox">
			<view><text>·</text><text>如果买家同意协商，将按双方协商价退款</text></view>
			<view><text>·</text><text>如果买家拒绝协商，需要您重新处理</text></view>
			<view><text>·</text><text>如果买家超时未处理，需要您重新处理</text></view>
			</view>
		</block>
		<block v-if="orderDt.orderRefund.status==5">
			<!-- 买家同意协商-->
			
		</block>
		<block v-if="orderDt.orderRefund.status==6">
			<!-- 买家拒绝协商 -->
			
		</block>
		<block v-if="orderDt.orderRefund.status==7">
			<!-- 卖家申请平台介入 -->
			
		</block>
		<block v-if="orderDt.orderRefund.status==10">
			<!-- 已退款-->
			
		</block>
		<block v-if="orderDt.orderRefund.status==11">
			<!-- 已关闭-->
			
		</block>
		<block v-if="orderDt.orderRefund.status==12">
			<!-- 退款失败-->
			
		</block>
		
		
		<view class="tishiBox" v-if="orderDt.refundStatus==1 || orderDt.refundStatus==5">
			<view><text>·</text><text>如果您同意，将直接退款给买家</text></view>
			<view><text>·</text><text>如果您拒绝，买家可以申请客服介入处理</text></view>
			<view><text>·</text><text>如果您逾期未处理，系统将自动退款给买家</text></view>
		</view>

		<view class="tishiBox" v-if="orderDt.refundStatus==4">
			<view><text>·</text><text>如果买家修改退款申请，需要您重新处理</text></view>
			<view><text>·</text><text>如果买家超时未响应，退款申请将自动关闭</text></view>
		</view>


		<!-- 退款信息 -->
		<view class="regionBox">
			<text class="regionTitle">退款信息</text>
			<view class="regionCnt refunBox">
				<!-- <view class="row">
					<view class="refunLabel">退款编号：</view>
					<view class="refunValue">123456789</view>
				</view> -->
				<view class="row">
					<view class="refunLabel">申请时间：</view>
					<view class="refunValue">{{orderDt.firstLog.createTime?orderDt.firstLog.createTime:''}}</view>
				</view>
				<view class="row">
					<view class="refunLabel">退款金额：</view>
					<view class="refunValue">￥{{orderDt.firstLog.amount.toFixed(2)}}</view>
				</view>
				<view class="row">
					<view class="refunLabel">退款原因：</view>
					<view class="refunValue">{{reason[orderDt.firstLog.type]}}</view>
				</view>
				<view class="row" v-if="orderDt.firstLog.reason">
					<view class="refunLabel">退款说明：</view>
					<view class="refunValue">{{orderDt.firstLog.reason}}</view>
				</view>
				<!-- <view class="row">
					<view class="refunLabel">退款凭证：</view>
					<view class="refunImgBox">

						<image v-for="(item,index) in orderDt.tradeLog.resList" :src="item.url" :key="index" @tap="showImage"></image>
					</view>
				</view> -->
			</view>
		</view>
		<!-- 协商历史 -->
		<view class="consultBox regionBox" @tap="toPage" data-url="consultHistory" :data-rid="orderDt.orderRefund.id">
			<text>协商历史</text>
			<text class="iconfont icon-right"></text>
		</view>
		<!-- 买家信息 -->
		<view class="regionBox buyerBox">
			<text class="regionTitle">买家信息</text>
			<view class="buyerInfo">
				<text class="buyerName">{{orderDt.nickname}}</text>
				<text class="buyerTel">{{orderDt.phone}}</text>
				<text class="iconfont icon-liaotian" :data-im="orderDt.imid" @tap="zixun"></text>
				<text class="iconfont icon-dianhua" :data-tel="orderDt.member.phone" @tap="call"></text>
			</view>
		</view>

		<!-- 订单信息 -->
		<view class="orderInfoBox">
			<text class="orderTitle">订单信息</text>
			<view class="goodBox">
				<image :src="orderDt.img" class="goodImg"></image>
				<view class="goodInfo">
					<text class="goodTitle">{{orderDt.name}}</text>
					<text class="goodPrice">￥{{orderDt.total.toFixed(2)}}</text>
				</view>
			</view>
			<view class="studentBox">
				<text class="studentTt">学员信息：</text>
				<text class="iconfont icon-renyuan"></text>
				<text class="studentName">{{orderDt.member.name}}</text>
				<image src="../../static/tel.png"  ></image>
				<text class="studentTel" >{{orderDt.member.phone}}</text>
			</view>
			<view class="studentBox">
				<text class="studentTt">{{txtArr[orderDt.status]}}：</text>
				<text class="paymentCount">￥{{(orderDt.payStatus!=1)?orderDt.price:orderDt.prepay}}</text>
			</view>
			<view class="orderInfo">
				<text>订单编号：</text>
				<text>{{orderDt.orderNo}}</text>
			</view>
			<view class="orderInfo">
				<text>创建时间：</text>
				<text>{{orderDt.createTime?orderDt.createTime:''}}</text>
			</view>
		</view>
		<view class="orderDtBtnGroup" v-if="orderDt.orderRefund.status!=3 && orderDt.orderRefund.status!=10 && orderDt.orderRefund.status!=11">
			<block v-if="orderDt.orderRefund.status==1">
				<!-- 买家发起申请 -->
				
				<button @tap="jujue" v-if="orderDt.orderRefund.type==1">请求协商</button>
				<button class="active" @tap="agree">同意退款</button>
			</block>
			<block v-if="orderDt.orderRefund.status==2">
				<!-- 买家撤销 -->
				
			</block>
			<block v-if="orderDt.orderRefund.status==3">
				<!-- 卖家同意 -->
				
			</block>
			<block v-if="orderDt.orderRefund.status==4">
				<!-- 卖家发起协商 -->
				<button class="active" @tap="agree">同意退款</button>
			</block>
			<block v-if="orderDt.orderRefund.status==5">
				<!-- 买家同意协商-->
				
			</block>
			<block v-if="orderDt.orderRefund.status==6">
				<!-- 买家拒绝协商 -->
				<button @tap="jieru">客服介入</button>
				<button class="active" @tap="agree">同意退款</button>
			</block>
			<block v-if="orderDt.orderRefund.status==7">
				<!-- 卖家申请平台介入 -->
				<button class="active" @tap="agree">同意退款</button>
			</block>
			<block v-if="orderDt.orderRefund.status==10">
				<!-- 已退款-->
				
			</block>
			<block v-if="orderDt.orderRefund.status==11">
				<!-- 已关闭-->
				
			</block>
			<block v-if="orderDt.orderRefund.status==12">
				<!-- 退款失败-->
				
			</block>
			
		</view>
		
		<!-- 确认退款   -->
		<poup ref="shureAgree"></poup>
	</view>
</template>

<script>
	import COMM from "@/common/common.js"
	import ttBar from "@/components/ttBar/ttBar.vue";
	import API from "@/common/api.js";
	import poup from "@/components/poup/poup.vue";
	import {
		mapState
	} from "vuex";
	export default {
		components: {
			ttBar,
			poup
		},
		computed: {
			...mapState({
				userInfo: state => state.user.userInfo,
				selectShop: state => state.shop.selectShop,
			})

		},
		data() {
			return {
				rid: '',
				userTel: '18795951234',
				remarkText: '',
				txtArr: ['已支付', '待支付预约金', '待支付尾款', '待支付付全款', '已支付', '已支付', '已支付', '已支付', '已支付', '已支付'],
				showText: ['', '请及时处理', '退款关闭', '退款成功', '等待买家处理', '退款成功', '请及时处理', '请等待客服处理','','', '退款成功', '退款关闭', '退款失败'],
				reason: ['','不喜欢该课程', '课程效果未达到预期', '距离远，不想去', '多拍/错拍', '因个人原因无法继续上课', '因商家原因无法上课', '商家推荐了其他课程', '其他'],
				orderDt: {
					total:0,
					orderRefund:{
						status:0
					},
					member:{
						phone:''
					},
					firstLog:{
						createTime:'',
						amount:0
					}
				}
			};
		},
		methods: {
			showImage() {
				let _this = this;
				uni.previewImage({
					urls: _this.refunImg,
					indicator: "default"
				});
			},
			call(e) {
				COMM.callPhone(e.currentTarget.dataset.tel);
			},
			getData() {
				API.getRefundOrderDetail(this.rid).then(res => {
					this.orderDt = res.data.data
				})
			},
			// 申请平台介入
			jieru() {
				this.toPage({
					url:'applyInter',
					orderId:this.orderDt.order_id,
					refundId:this.orderDt.orderRefund.id,
				})
			},
			// 请求协商
			jujue() {
				this.toPage({
					url: 'refuseRefund',
					orderId: this.orderDt.order_id,
					refundId: this.orderDt.orderRefund.id,
				})
			},
			// 同意退款
			agree() {
				
				let _this = this;
				_this.$refs.shureAgree.init({
					title: '确认同意退款',
					cntText: '如果您同意，将直接退款给买家',
					confirmFcn: () => {
						API.agreeRefund({
							orderId: _this.orderDt.order_id,
							refundId: _this.orderDt.orderRefund.id,
							operId: this.userInfo.userId,
							status: 3,
						}).then(res => {
							uni.showToast({
								title: '同意退款成功',
								icon: 'none'
							});
							_this.getData();
						})
					}
				})
				_this.$refs.shureAgree.show();
			},
			// 获取倒计时
			getDjs(time) {
				if (time) {
					let leftTime = parseInt(time) * 1000
					let hours = parseInt(leftTime / 1000 / 60 / 60, 10); //计算剩余的小时
					let minutes = parseInt(leftTime / 1000 / 60 % 60, 10); //计算剩余的分钟
					hours = checkTime(hours);
					minutes = checkTime(minutes);
					return hours + '小时' + minutes + '分钟后自动关闭'
				}

				function checkTime(i) { //将0-9的数字前面加上0，例1变为01
					if (i < 10) {
						i = "0" + i;
					}
					return i;
				}
			},
			
			zixun() {
				if(this.userInfo.admin==1 || this.userInfo.roles.join(',').indexOf('3')>-1){
					let toImid = this.orderDt.imid;
					this.toPage({
						url: 'conversationDt',
						cvid: 'C2C' + toImid,
						toImId: toImid
					})
				}else{
					uni.showToast({
						title: '暂无相关权限',
						icon: 'none'
					});
				}

			}
		},
		onLoad(cfm) {
			// this.rid=cfm.orderId
			this.rid = cfm.orderId
			this.getData()
			uni.$on("rfdtSX",()=>{
				this.getData()
			})
		},
		onPullDownRefresh() {
			setTimeout(() => {
				this.getData()
				uni.stopPullDownRefresh();
			}, 1500)
		}
	}
</script>

<style lang="less">
	page {
		background-color: #f6f6f6;
	}

	.orderStatusBox {
		display: flex;
		align-items: center;
		background-color: #ffb423;
		padding: 20upx 30upx;

		.iconfont {
			font-size: 76upx;
			margin-right: 30upx;
			color: #07080d;
		}

		.orderTextBox {
			display: flex;
			flex-direction: column;
		}

		text {
			font-size: 28rpx;
			color: #07080d;
		}

		.statusText {
			font-size: 32rpx;
			font-weight: bold;
			color: #07080d;
			margin-bottom: 10upx;
		}
	}

	.orderRefun {
		display: inline-block;
		font-size: 28rpx;
		color: #ed2e2e;
		text-align: center;
		margin-top: 18upx;
		margin-bottom: 18upx;
		width: 100%;

	}

	.tishiBox {
		display: flex;
		background-color: #FFFFFF;
		margin-bottom: 18upx;
		width: 100%;
		display: flex;
		flex-direction: column;
		padding: 20upx 30upx;

		text {
			font-size: 28rpx;
			color: #737373;
			margin-bottom: 10upx;
		}

		text:first-child {
			font-size: 40upx;
			font-weight: bold;
			color: #737373;
			margin-right: 20upx;
		}
	}

	.refunBox {
		display: flex;
		flex-direction: column;

		.row {
			display: flex;
			align-items: flex-start;
			padding: 10upx 0;

			.refunLabel {
				font-size: 26rpx;
				color: #737373;
				margin-right: 50upx;
				flex-shrink: 0;
			}

			.refunValue {
				font-size: 26rpx;
				color: #202932;
				word-break: break-all;
			}

			.refunImgBox {
				display: flex;
				flex-wrap: wrap;

				image {
					width: 120upx;
					height: 120upx;
					border-radius: 8upx;
					margin-right: 15upx;
					margin-bottom: 15upx;
				}
			}
		}
	}

	.consultBox {
		display: flex;
		flex-direction: row;
		padding: 50upx;
		justify-content: space-between;
		align-items: baseline;
		box-shadow: 0rpx 3rpx 17rpx 0rpx rgba(201, 202, 208, 0.15);

		text {
			font-size: 26rpx;
			color: #202932;
		}

		.iconfont {
			font-size: 28upx;
		}
	}

	.buyerBox {
		padding-bottom: 40upx;

		.buyerInfo {
			display: flex;
			align-items: center;

			.buyerName {
				font-size: 32rpx;
				color: #202932;
				margin-right: 42upx;
			}

			.buyerTel {
				font-size: 32rpx;
				color: #202932;
				flex: 1;
			}

			.iconfont {
				color: #ffb423;
				font-size: 48upx;
				margin-left: 50upx;
			}

		}

	}

	.orderInfoBox {
		margin: 20upx 17upx;
		background-color: #FFFFFF;
		box-shadow: 0rpx 3rpx 17rpx 0rpx rgba(201, 202, 208, 0.15);
		border-radius: 10upx;
		padding: 20upx 0 40upx 0;
		display: flex;
		flex-direction: column;
		margin-bottom: 142upx;

		.orderTitle {
			font-size: 36rpx;
			font-weight: bold;
			color: #202932;
			padding-left: 32upx;
		}

		.goodBox {
			display: flex;
			border-bottom: 1px solid #efefef;
			padding: 15upx 32upx;

			image {
				width: 166upx;
				height: 166upx;
				flex-shrink: 0;
				border-radius: 10upx;
				margin-right: 30upx;
			}

			.goodInfo {
				display: flex;
				flex-direction: column;
				padding: 12upx 0;

				.goodTitle {
					font-size: 28rpx;
					color: #202932;
					margin-bottom: 8upx;
				}

				.goodPrice {
					font-size: 32rpx;
					font-weight: bold;
					color: #202932;
				}
			}

		}

		.studentBox {
			display: flex;
			align-items: center;
			border-bottom: 1px solid #efefef;
			padding: 15upx 32upx;

			.studentTt {
				font-size: 28rpx;
				color: #202932;
			}

			.iconfont {
				font-size: 40upx;
				color: #babfc3;
				margin-right: 15upx;
			}

			.studentName {
				font-size: 28rpx;
				color: #202932;
				margin-right: 50upx;
			}

			image {
				width: 40upx;
				height: 40upx;
				margin-right: 15upx;
			}

			.studentTel {
				font-size: 28rpx;
				color: #202932;
			}

			.paymentCount {
				font-size: 36rpx;
				font-weight: bold;
				color: #202932;
			}
		}

		.orderInfo {
			display: flex;
			padding: 20upx 32upx 0 32upx;
			font-size: 26rpx;
			color: #737373;
		}

	}

	.orderDtBtnGroup {
		position: fixed;
		width: 100%;
		height: 132upx;
		bottom: 0;
		left: 0;
		background-color: #FFFFFF;
		z-index: 99;
		display: flex;
		justify-content: flex-end;
		align-items: center;
		padding: 0 20upx;

		button {
			margin: 0;
			width: 206rpx;
			height: 64rpx;
			border-radius: 32upx;
			background-color: rgba(0, 0, 0, 0);
			font-size: 34upx;
			line-height: 58upx;
			color: #767676;
			border: 3upx solid #767676;
			margin-left: 24upx;
		}

		button:after {
			border: none;
		}

		.active {
			border: 3upx solid #ffa71d;
			color: #ffa71d;
		}
	}
</style>
